<template>
	<view v-if="order">
		<view class="padding-xl flex-col align-center">
			<view class="text-sl text-center">￥{{order.total_amount}}</view>
			<view class="text-gray text-center margin-tb-xs">{{order.coupon_name}}</view>
		</view>
		<view class="padding-lr-lg bg-white">
			<view class="item">
				<text>支付方式</text>
			</view>
			<u-line color="#BFBFBF"></u-line>
			<view class="item bt" hover-class="on" @click="pay=1">
				<view class="flex-row align-center">
					<image src="../../static/images/pay-1.png" style="width: 40rpx;" mode="widthFix"></image>
					<text class="margin-left">余额支付</text>
				</view>
				<view class="radio" :class="{ on: pay==1 }"></view>
			</view>
			<u-line color="#BFBFBF"></u-line>
			<view class="item bt" hover-class="on" @click="pay=2">
				<view class="flex-row align-center">
					<image src="../../static/images/pay-2.png" style="width: 40rpx;" mode="widthFix"></image>
					<text class="margin-left">支付宝支付</text>
				</view>
				<view class="radio" :class="{ on: pay==2 }"></view>
			</view>
			<u-line color="#BFBFBF"></u-line>
			<view class="item bt" hover-class="on" @click="pay=3">
				<view class="flex-row align-center">
					<image src="../../static/images/pay-3.png" style="width: 40rpx;" mode="widthFix"></image>
					<text class="margin-left">微信支付</text>
				</view>
				<view class="radio" :class="{ on: pay==3 }"></view>
			</view>
		</view>

		<my-btn gold style="margin: 60rpx auto" @click="choosePay">立即支付</my-btn>

		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
		 v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{order.total_amount}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				pay: 0,
				no: '',
				order: '',
				show: false,
				password: '',
				rest: 0
			};
		},
		computed: {
			payment() {
				if (this.pay == 1) return 'balance'
				if (this.pay == 2) return 'alipay'
				if (this.pay == 3) return 'wechat'
			},
		},
		onLoad(opt) {
			this.no = opt.no
			this.rest = opt.rest
			this.pay = 1
			this.getData();
		},
		methods: {
			getData() {
				this.$u.get('/coupons/order/detail?trade_no=' + this.no).then(res => {
					this.order = res.data.result.order
				})
			},
			gotopay() {
				this.show = false
				uni.showLoading({
					title: '支付中...',
					icon: 'none'
				})
				let data = {
					trade_no: this.no,
					payment: this.payment,
					paypwd: this.password
				}
				this.$u.post('/coupons/sale/pay', data).then(res => {
					let {
						balance,
						wechat,
						alipay
					} = res.data.result
					if (balance) {
						this.$msg(balance.msg)
						if (balance.code == 0) {
							this.$goto('/pages/mine/coupons', 'redirect')
						}
					}
					if (wechat) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: JSON.stringify(wechat),
							success: res => {
								this.$goto('/pages/mine/coupons', 'redirect')
							},
							fail: err => {
								this.$msg('支付失败')
							}
						});
					}
					if (alipay) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: alipay,
							success: res => {
								this.$goto('/pages/mine/coupons', 'redirect')
							},
							fail: err => {
								this.$msg('支付失败')
							}
						});
					}
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.gotopay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			choosePay() {
				if (this.pay == 1) {
					this.password = ''
					this.show = true
				} else {
					this.gotopay();
				}
			},
			showPop(flag = true) {
				this.password = '';
				this.show = flag;
			},
			finish() {
				console.log(11111)
			}
		}
	}
</script>

<style lang="scss">
	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}

	.top {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.textarea {
		margin: 20rpx 0;
		width: 670rpx;
		height: 200rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 24rpx;
	}

	.item {
		height: 100rpx;
		display: flex;
		align-items: center;

		&.on {
			opacity: 0.7;
			transform: translate(1px, 1px);
		}

		&.bt {
			justify-content: space-between;
		}

		.text {
			min-width: 160rpx;
		}

		.radio {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			background: url(../../static/images/ra0.png);
			background-size: 100% 100%;

			&.on {
				background: url(../../static/images/ra1.png);
				background-size: 100% 100%;
			}
		}
	}
</style>
